/*
 * @Author: webcc
 * @Date: 2022-10-22 22:17:24
 * @LastEditTime: 2022-10-24 09:06:51
 * @email: webcc.coder@qq.com
 */
import React, { Component } from 'react'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Space, Table, Tag, message, Modal } from 'antd';
import { EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'
import { ArticleStatus } from 'utils/constants';
import { reqGetArticleList, reqRemoveArticle } from 'api/article'
import Channel from 'components/Channel'
import defaultImg from 'assets/error.png'
const { RangePicker } = DatePicker;

export default class Article extends Component {
    columns = [
        {
            title: '封面',
            render: (data) => {
                if (data.cover.type == 0) {
                    return <img src={defaultImg} alt="" style={{ width: 200, height: 200, objectFit: 'cover' }} />
                } else {
                    // objectFit图片平铺容器
                    return <img src={data.cover.images[0]} alt="" style={{ width: 200, height: 200, objectFit: 'cover' }} />
                }
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render(status) {
                let obj = ArticleStatus.find(item => item.id == status)
                return (<Tag color={obj.color}>{obj.name}</Tag>)
            }
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate',
        },
        {
            title: '阅读数',
            dataIndex: 'read_count',
        },
        {
            title: '评论数',
            dataIndex: 'comment_count',
        },
        {
            title: '点赞数',
            dataIndex: 'like_count',
        },
        {
            title: '操作',
            render: (data) => {
                return (
                    <Space>
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => this.handleEdit(data.id)} />
                        <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={() => this.handleDelete(data.id)} />
                    </Space>
                )
            }
        },
    ];
    reqParams = {
        page: 1,
        per_page: 10
    }
    state = {
        article: {}
    }
    render() {
        const { total_count, results, page, per_page } = this.state.article
        return (
            <div>
                <Card title={
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>文章列表</Breadcrumb.Item>
                    </Breadcrumb>
                }>
                    <Form
                        initialValues={{ status: -1 }}
                        onFinish={this.onFinish}
                    >
                        <Form.Item label="状态" name="status">
                            <Radio.Group>
                                {
                                    ArticleStatus.map(item => (<Radio key={item.id} value={item.id}>{item.name}</Radio>))
                                }
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="频道" name="channel_id">
                            <Channel></Channel>
                        </Form.Item>
                        <Form.Item label="日期" name="date">
                            <RangePicker />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                筛选
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
                <Card title={`根据筛选条件共查询到${total_count}条结果`}>
                    <Table
                        columns={this.columns}
                        dataSource={results}
                        rowKey="id"
                        pagination={{
                            position: ['bottomCenter '],
                            total: total_count,
                            current: page,
                            pageSize: per_page,
                            onChange: this.onChange
                        }}
                    />
                </Card>
            </div>
        )
    }

    /**
     * 删除文章
     */
    handleDelete = async (id) => {
        try {
            await reqRemoveArticle(id)
            Modal.confirm({
                title: '温馨提示',
                icon: <ExclamationCircleOutlined />,
                content: '确认删除该文章吗？',
                onOk: () => {
                    message.success("删除成功")
                    this.getArticlesList()
                },
            });
        } catch (error) {
            message.error("删除失败")
        }
    }

    /**
     * 修改文章
     * @param {string} id 
     */
    handleEdit = (id) => {
        this.props.history.push(`/home/publish/${id}`)
    }

    onChange = (page, pageSize) => {
        this.reqParams.page = page
        this.reqParams.per_page = pageSize
        this.getArticlesList()
    }

    async componentDidMount() {
        this.getArticlesList()
    }

    getArticlesList = async () => {
        const res = await reqGetArticleList(this.reqParams)
        this.setState({
            article: res.data
        })
    }

    onFinish = ({ status, channel_id, date }) => {
        if (status != -1) {
            this.reqParams.status = status
        } else {
            delete this.reqParams.status
        }
        if (channel_id != undefined) {
            this.reqParams.channel_id = channel_id
        } else {
            delete this.reqParams.channel_id
        }
        if (date) {
            this.reqParams.begin_pubdate = date[0].startOf('day').format('YYYY-MM-DD HH-mm-ss')
            this.reqParams.end_pubdate = date[1].endOf('day').format('YYYY-MM-DD HH-mm-ss')
        } else {
            // delete可以删除对象属性
            delete this.reqParams.begin_pubdate
            delete this.reqParams.end_pubdate
        }
        this.reqParams.page = 1
        this.getArticlesList()
    }
}
